<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    
    <link rel="stylesheet" href="../font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/sousuo.css">
</head>

<body>
    <nav>
        <div><input type="text" placeholder="搜索已完成订单：商品名称"><span class="fa fa-search"></span></div>
        <span class="aa cancle">取消</span>
    </nav>
    <div class="content">
        <div class="serch">
            <div><span class="fa fa-clock-o"></span><span class="aa">最近搜索</span>
            </div>
            <div class="s1">无搜索历史</div>
            <div class="s4"><img src="../images/infor.png" alt=""><span>其他业务</span></div>
            <div class="s2">
                <ul>
                    <li>百联有礼</li>
                    <li>百联到家</li>
                    <li>组队订单</li>
                </ul>
            </div>
            <div class="s4"><img src="../images/2.png" alt=""><span>充值缴费</span></div>
            <div class="s3">
                <ul>
                    <li>话费充值</li>
                    <li>流量充值</li>
                    <li>固话宽带充值</li>
                    <li>加油卡充值</li>
                    <li>水电煤充值</li>
                    <li>有线电视充值</li>
                    <li>铁通充值</li>
                    <li>QQ游戏充值</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="bottom">
       
    </div>
    <div class="po">没有关于此类的商品</div>
</body>
<script src="../js/jquery-3.1.1.js"></script>
<!-- <script src="./js/sousuo.js"></script> -->
<script>
 var cancle=document.querySelector('.cancle');
 cancle.onclick=function(){
     location.href="../index.html";
 }
//  $('body').width($(window).width());
 var search;
$.ajax({
         url:'../php/sousuo.php',
          type:'get',
          dataType:'json',
          success:function(res){
            search=res.list;
          }
      })
     
  $('.fa-search').click(function(){
      console.log(22);
    var html='';
      var val=$('input').val();
      var keylist=search.filter(item => {
          if(item.title.indexOf(val)!==-1){
              return item;
          }
      });
      keylist=JSON.parse(JSON.stringify(keylist));
      console.log(Array.isArray(keylist));
      console.log(keylist);
    if(keylist.length==0){
        console.log(99);
        $('.po').fadeIn();
        setTimeout(function(){
            $('.po').fadeOut();
        },1000)
    }

      keylist.forEach(function(e,i){
        html += `
              <div class="product">
                <img src="${e.bigimg_url}">
                <div class='right'>
                    <p>${e.title}</p>
                    <span>[拼团]</span>
                    <p>￥100</p>
                </div>
              </div>
     `;
      })
      $('.bottom').html(html);
  })

</script>
</html>